<template>
  <div class="letter-box">
    <p class="row">打赏成功！</p>
    <div class="pd10">
      <div class="input-box">
        <span>￥{{money}}</span>
      </div>
      <div class="fl-box">
        <div class="fl-left">
          <img :src="sourceUrl+sommelier.imageUrl" alt="">
          <span>{{sommelier.name}}</span>
        </div>
        <div class="fl-right">
          <span></span>
        </div>
      </div>
      <!--tabs-->
      <ul class="user-comment">
        <li v-for="(item,index) in labelArray" :style="{background:libg[Math.floor(Math.random()*10)]}">{{item}}</li>
      </ul>
      <div class="comment">{{note}}</div>
      <button class="btn-class" @click="openPop()">分享</button>
      <div class="tips">您已打赏了巨款，感激涕零，老板大方，生意兴隆，桃运财运、好事不断，感谢老大的打赏，我要吹瓶表忠心，争取老板再次宠爱！</div>
    </div>
    <share-pop v-if="isOpen" @isClose="closePop"></share-pop>
  </div>
</template>

<script>
  import SharePop from '../public/sharePop.vue'
  import global from '../public/global.vue'
  export default {
    components:{
      'share-pop':SharePop
    },
    name: 'name',
    data() {
      return {
        sourceUrl:global.sourceUrl,
        lidata:['服务态度好','专业知识丰富','长得帅'],
        libg:global.libg,
        isOpen:false,
        label:'',
        labelArray:[],
        money:0,
        note:'',
        name:'',
        sommelier:{}
      }
    },
    methods: {
      //分享
      openPop(){
        this.isOpen=true;
      },
      //我知道啦
      closePop (val) {
        this.isOpen=val;
      },

    },
    created: function () {

      document.title = "感谢函"
      let label = this.$route.query.label
      //let label = 'a,b,c'
      let agentId = this.$route.query.agentId
      this.money = this.$route.query.money
      this.note = this.$route.query.note
      let text="http://www.yingla9.com/dist/#/thanksLetter/?agentId="+agentId+"&label="+label+"&money="+this.money+"&note="+this.note;
      global.wxShare(window.location.href, "感谢函", text,this);
      if(label){
        this.labelArray = label.split(",");
      }
      let url = global.apiUrl
      this.$http.get(url + "/sommelier/sommelierInfo", {
        params: {id: agentId}
      }).then(res => {
        console.log(res.data);
        if (res.data.code == 0) {
          this.sommelier = res.data.data;
        }
      }).catch(function (err) {
        console.error("Error:" + err);
      })


    },
    mounted:function () {
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .letter-box {
    width: 100%;
    background: #fff;
    .row{
      width:100%;
      height:2rem;
      line-height: 2rem;
      text-align: center;
      font-size: 1rem;
      color:#fff;
      background: #D43F3F;
    }
    .pd10{
      width:100%;
      padding:0 2.5%;
      .input-box{
        width:100%;
        padding:10% 0;
        text-align: center;
        font-size: 2rem;
        color:#D43f3f;
        span{
          vertical-align: middle;
          font-size: 1.7rem;
          color:#d43f3f;
        }
      }
      .fl-box{
        width:100%;
        padding:1% 0;
        font-size: 0.9rem;
        color:#333;
        display: flex;
        justify-content: space-between;
        border-bottom:1px solid #eee;
        .fl-left{
          img{
            width:30px;
            height:30px;
            border-radius:50%;
            vertical-align: middle;
          }
        }
        .fl-right{
          font-size: 0.85rem;
        }
      }
      .user-comment {
        width: 100%;
        padding-top: 10px;
        display: flex;
        flex-wrap: wrap;
        li {
          height: 1.5rem;
          line-height: 1.5rem;
          font-size: 0.8rem;
          color: #fff;
          /*background: #F680B8;*/
          text-align: center;
          margin-left: 10px;
          margin-bottom: 10px;
          border-radius: 30px;
          padding: 0 10px;
        }
      }
      .comment{
        font-size:0.8rem;
        color:#777;
      }
      .btn-class{
        width:100%;
        height:2.4rem;
        line-height:2.4rem;
        margin-top:80px;
        font-size: 1rem;
        color:#fff;
        letter-spacing: 0.5rem;
        background: #d43f3f;
        border-radius:6px;
        border:none;
      }
      .tips{
        margin-top:30px;
        font-size: 0.75rem;
        color:#aaa;
      }
    }

  }
</style>
